html, body, #root
  height: 100%
.G-main
  padding: 20px
.G-fullpage
  display: flex
  height: 100%
.G-layout-main
  flex: 1
  overflow: auto

:root
  // 滚动条样式
  --theme-scrollbar-color-track: rgb(241,241,241)
  --theme-scrollbar-color-track-border: rgb(230,230,230)
  --theme-scrollbar-color-thumb: rgb(193,193,193)
  --theme-scrollbar-color-thumb-hover: rgb(168,168,168)
  [theme-mode=dark]
    --theme-scrollbar-color-track: rgb(44,44,44)
    --theme-scrollbar-color-track-border: rgb(56,56,56)
    --theme-scrollbar-color-thumb: rgb(107,107,107)
    --theme-scrollbar-color-thumb-hover: rgb(115,115,115)

/* 全局滚动条样式 */
// 滚动条厚度
body[os=windows] *::-webkit-scrollbar
	width:14px
	height:14px
// 滚动条（水平+垂直）样式
body[os=windows] *::-webkit-scrollbar-track
	background: var(--theme-scrollbar-color-track)
// 滚动条（水平+垂直）hover样式
body[os=windows] *::-webkit-scrollbar-track:hover
	background: var(--theme-scrollbar-color-track)
// 滚动条（水平）样式
body[os="windows"] *::-webkit-scrollbar-track:horizontal
  border-top: solid 1px var(--theme-scrollbar-color-track-border)
// 滚动条（垂直）样式
body[os="windows"] *::-webkit-scrollbar-track:vertical 
  border-left: solid 1px var(--theme-scrollbar-color-track-border)
// 滚动滑块（水平+垂直）样式
body[os=windows] *::-webkit-scrollbar-thumb
  background: var(--theme-scrollbar-color-thumb)
  border-radius: 14px
  border: 3px solid transparent
  // 解决滑块边框遮挡滚动条背景边框
  background-clip: padding-box
body[os=windows] *::-webkit-scrollbar-thumb:hover
  background: var(--theme-scrollbar-color-thumb-hover)
  // 解决滑块边框遮挡滚动条背景边框
  background-clip: padding-box
// 滚动滑块（水平）样式
body[os=windows] *::-webkit-scrollbar-thumb:horizontal
  // 解决滑块与背景上下边距不统一的问题
  border-top-width: 4px
// 滚动滑块（垂直）样式
body[os=windows] *::-webkit-scrollbar-thumb:vertical
  // 解决滑块与背景左右边距不统一的问题
  border-left-width: 4px
// 滚动条首尾的按钮样式
body[os=windows] *::-webkit-scrollbar-button
	display:none
// 水平和垂直滚动条在页面右下角交叉处产生的空白区域样式
body[os=windows] *::-webkit-scrollbar-corner
  background: var(--theme-scrollbar-color-track)